<template>
  <div class="Home">
    <h1>Home</h1>
    <div class="fixed">
      <div class="mapSearch">
        <p>搜索：</p>
        <input id="keyword" type="text" @keydown.enter="keywordSearch" />
      </div>
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      // 地图实例
      map: null,
      // 标注经纬度 第一个经度，第二个纬度
      markerPoint: null,
      // Marker 实例
      marker: null,
      // PlaceSearch 实例
      placeSearch: null,
    };
  },
  mounted() {
    // 初始化地图
    this.initMap();
  },
  destroyed() {
    this.destroyMap();
  },
  methods: {
    // 销毁地图
    destroyMap() {
      // 销毁地图，并清空地图容器
      this.map.destroy();
      this.map = null;
    },
    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: "1991e797f3396b44b9744f5131022994", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          let that = this;
          // 创建地图实例
          this.map = new AMap.Map("container", {
            //中心点坐标 缺省，地图默认定位到用户所在城市的中心
            zoom: 11, //级别
          });
          // 创建标注
          this.addMarker([this.map.getCenter().lng, this.map.getCenter().lat]);
          // 绑定click事件
          this.map.on("click", this.clickHandler);
          // 获取当前中心点对应的城市 并设置检索逻辑
          this.map.getCity(function (info) {
            // 设置输入自动提示以及关键字检索插件
            AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function () {
              var autoOptions = {
                city: info.city, //城市，默认全国
                input: "keyword", //使用联想输入的input的id
              };
              var autoComplete = new AMap.AutoComplete(autoOptions);
              that.placeSearch = new AMap.PlaceSearch({
                city: info.city, // 要检索的城市，缺省为全国
                map: that.map,
              });
              // 监听选择提示选项事件
              autoComplete.on("select", function (e) {
                // 关键词检索
                that.placeSearch.search(e.poi.name);
              });
              // POI在地图中对应的Marker被点击时触发
              that.placeSearch.on("markerClick", function (e) {
                // 移除已创建的标注
                that.removeMarker();
                // 创建标注
                that.addMarker([e.data.location.lng, e.data.location.lat]);
              });
            });
          });
        })
        .catch((e) => {
          console.error(e); //加载错误提示
        });
    },
    // 地图点击事件
    clickHandler(e) {
      // 移除已创建的标注
      this.removeMarker();
      // 创建标注
      this.addMarker([e.lnglat.lng, e.lnglat.lat]);
    },
    // 移除已创建的标注
    removeMarker() {
      // 移除已创建的 marker
      this.map.remove(this.marker);
      this.marker = null;
    },
    // 创建标注
    addMarker(position) {
      // 给标注经纬度赋值
      this.markerPoint = position;
      // 创建一个 Marker 实例：
      this.marker = new AMap.Marker({
        position: position, // 经纬度对象，也可以是经纬度构成的一维数组
      });
      // 将创建的点标记添加到已有的地图实例：
      this.map.add(this.marker);
      console.log("当前标注经纬度：", this.markerPoint);
    },
    // 关键字检索
    keywordSearch(e) {
      this.placeSearch.search(e.target.value);
    },
  },
};
</script>
<style lang="scss" scoped>
.Home {
  > h1 {
    font-size: 20px;
  }
  > .fixed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    > .mapSearch {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 50px;
    }
    > #container {
      width: 500px;
      height: 500px;
    }
  }
}
</style>
